<template>
  <div>
    <el-card>
      <!-- @changeValue="onChangeValue" 同等与 inputConfig/numberConfig等...的onChange -->
      <el-form ref="tableRef" :model="formParam" label-width="auto">
        <!-- form -->
        <v-form :form="form" :formParam="formParam" :inline="false">
          <template #customize="{ label, key }">
            <el-input
              v-model="formParam[key]"
              :placeholder="`请输入${label}`"
              clearable
            />
          </template>
        </v-form>
        <!-- table -->
        <v-table
          style="margin: 10px 0"
          label="列表"
          :is="false"
          :keys="keys"
          :table="table"
          :apiFn="tableList"
          :formParam="formParam"
          :inputConfig="{ onChange }"
          :selectConfig="{ select: onChange }"
          :disabledConfig="{
            name: !(id == 1),
            ages: id,
          }"
          :optionConfig="{
            treeOption,
          }"
          :inline="false"
          @changeValue="onChangeValue"
        >
          <!-- 中间层：信息/按钮等 -->
          <template #info>
            <!-- 添加行 -->
            <div class="but">
              <el-button type="primary" size="small" @click="onAction(true)">
                添加
              </el-button>
            </div>
          </template>
          <!-- table -->
          <template #annex>
            <el-button type="primary" link>附件</el-button>
          </template>
          <template #operate="{ row, index }">
            <el-popconfirm
              title="确认删除此项吗？"
              @confirm="onAction(false, index)"
            >
              <template #reference>
                <el-button type="danger" link> 删除 </el-button>
              </template>
            </el-popconfirm>
          </template>
        </v-table>
      </el-form>
      <div class="but">
        <el-button style="margin: 0 8px" @click="() => tableRef.resetFields()"
          >清空</el-button
        >
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </div>
    </el-card>
  </div>
</template>
<script  setup>
import { ref } from "vue";
import { table, form } from "./config/index";
import { tableList } from "@/api";
import { ElMessage } from "element-plus";

const formParam = ref({});
// option
const treeOption = ref([
  {
    id: 1,
    label: "树1",
    children: [
      {
        id: 11,
        label: "树 1-1",
      },
    ],
  },
  {
    id: 2,
    label: "树2",
  },
]);

// ref
const tableRef = ref(null);

// 假设这是id
const id = ref(1);
/** 表格 */
const keys = "tableData";

// 添加删除/行
const onAction = (status, i) => {
  if (!formParam.value[keys]) {
    formParam.value[keys] = [];
  }
  // i：删除索引
  if (status) {
    // 添加
    formParam.value[keys].push({});
    return;
  }
  formParam.value[keys].splice(i, 1);
};

const onChange = (data) => {
  console.log(data, "onChange");
};

// table监听集合
const onChangeValue = (data) => {
  console.log(data, "onChangeValue");
  switch (data.type) {
    case "tree":
      //
      break;
    case "select":
      //
      break;
    case "date":
      //
      break;
  }
};

// 确认
const onSubmit = async () => {
  console.log(formParam.value, "onSubmit");
  tableRef.value
    .validate()
    .then(() => {
      console.log("submit!");
    })
    .catch((err) => {
      ElMessage({
        message: "请填写必填项！",
        grouping: true,
        type: "warning",
      });
      console.log("error submit!", err);
    });
};
</script>


<style scoped lang="scss">
.but {
  display: flex;
  justify-content: flex-end;
}
</style>